Skip to content

Messages view does not indicate that it is waiting for a response from ServiceControl#3047

Merged
ngallegos merged 17 commits into
masterfrom
audit-search-loading-indicator
Jul 8, 2026
Merged

Messages view does not indicate that it is waiting for a response from ServiceControl#3047
ngallegos merged 17 commits into
masterfrom
audit-search-loading-indicator

Conversation

@ngallegos

@ngallegos ngallegos commented Jun 30, 2026

Copy link
Copy Markdown
Contributor

Symptoms

Who's affected

All users of ServicePulse, but more so those where HTTP requests to ServiceControl from the Messages view take longer to resolve.

Root cause

The UI only had a loading indicator showing on the first load, not on subsequent requests from auto-refresh, searching, or filtering.

Confirmed workarounds

None

Additional Information

When HTTP calls to ServiceControl take longer than expected, the audit messages view does not make it clear that the user is waiting for something to finish. This introduces some UI improvements to help with that:

  • The message list now shows the loading spinner with an overlay when waiting on an HTTP call
  • The refresh button is linked to HTTP calls instead of becoming ready after a hardcoded 1 second
  • The search and filter controls become disabled along with the refresh button while data is being fetched

Reviewer Checklist

  • Components are broken down into sensible and maintainable sub-components.
  • Styles are scoped to the component using it. If multiple components need to share CSS, then a .css file is created containing the shared CSS and imported into component scoped style sections.
  • Naming is consistent with existing code, and adequately describes the component or function being introduced
  • Only functions utilizing Vue state or lifecycle hooks are named as composables (i.e. starting with 'use');
  • No module-level state is being introduced. If so, request the PR author to move the state to the corresponding Pinia store.

Comment thread src/Frontend/src/components/RefreshConfig.vue Outdated
@boblangley

Copy link
Copy Markdown
Member

Tamara and I are going to push a commit for a new direction.

AuditList knows if a query is running. It should disable all of the form fields that can trigger a new query. We will abandon the 1 second refresh because now there is a loading spinner.

A future feature can add cancellation which is probably needed.

Comment thread src/Frontend/src/components/audit/FiltersPanel.vue Outdated
Comment thread src/Frontend/src/components/audit/FiltersPanel.vue Outdated
Comment thread src/Frontend/src/components/audit/FiltersPanel.vue Outdated
Comment thread src/Frontend/src/components/audit/FiltersPanel.vue Outdated
Comment thread src/Frontend/src/components/audit/FiltersPanel.vue Outdated
Comment thread src/Frontend/src/components/audit/FiltersPanel.vue Outdated
Comment thread src/Frontend/src/components/audit/FiltersPanel.vue Outdated
Comment thread src/Frontend/src/components/audit/FiltersPanel.vue Outdated
Comment thread src/Frontend/src/components/audit/FiltersPanel.vue Outdated
Comment thread src/Frontend/src/components/audit/FiltersPanel.vue Outdated
Comment thread src/Frontend/src/components/audit/FiltersPanel.vue Outdated
Co-authored-by: Tamara Rivera <tamita.rivera@gmail.com>
Comment thread src/Frontend/src/components/audit/FiltersPanel.vue Outdated
Comment thread src/Frontend/src/components/audit/FiltersPanel.vue Outdated
Comment thread src/Frontend/src/components/audit/FiltersPanel.vue Outdated
Comment thread src/Frontend/src/components/audit/FiltersPanel.vue Outdated
Comment thread src/Frontend/src/components/audit/FiltersPanel.vue Outdated
Comment thread src/Frontend/src/components/audit/FiltersPanel.vue Outdated
Comment thread src/Frontend/src/components/audit/FiltersPanel.vue Outdated
Comment thread src/Frontend/src/components/audit/FiltersPanel.vue Outdated
Comment thread src/Frontend/src/components/audit/FiltersPanel.vue Outdated
Prettier hates me

Co-authored-by: Tamara Rivera <tamita.rivera@gmail.com>
Comment thread src/Frontend/src/components/audit/FiltersPanel.vue Outdated
Co-authored-by: Tamara Rivera <tamita.rivera@gmail.com>
Comment thread src/Frontend/src/components/audit/AuditList.vue Outdated
Comment thread src/Frontend/src/components/audit/AuditList.vue Outdated
@johnsimons

Copy link
Copy Markdown
Member

Sorry, I ended up reviewing this PR, I couldn't resist 🙂

This PR is a massive improvement, and I am not suggesting changing it at all, but I thought I'd share this blog about using skeleton shimmers vs spinners. I have been reading more about this topic and thought it may be beneficial to consider in a future PR.

ngallegos and others added 2 commits July 7, 2026 06:52
Co-authored-by: John Simons <john.simons@particular.net>
# Conflicts:
#	src/Frontend/src/components/audit/AuditList.vue

@boblangley boblangley left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FilterInput can still have a pending debounced model update when the controls become disabled. If that debounce fires during the in-flight request, AuditList updates the route/filter state and calls refreshNow, but useFetchWithAutoRefresh returns early while already refreshing. That can leave the input/URL ahead of the displayed results. Not necessarily a blocker for this PR, but flushing the debounce on disable or queuing one follow-up refresh would close the loop.

This is an edge case that is a race-condition likely only with auto-updates. So this is optional IMO.

Better would be for us to not automatically submit queries.

const debounceUpdateModel = useDebounceFn((value: string) => {
model.value = value;
}, 600);

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
watch(
() => props.disabled,
(disabled) => {
if (disabled) {
debounceUpdateModel.flush();
}
}
);

@@ -1,2 +1,2 @@
<script setup lang="ts">
import { computed, useTemplateRef } from "vue";

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
import { computed, useTemplateRef, watch } from "vue";

@ngallegos ngallegos merged commit 5cb70fc into master Jul 8, 2026
5 checks passed
@ngallegos ngallegos deleted the audit-search-loading-indicator branch July 8, 2026 21:10
@ngallegos ngallegos added this to the 2.9.1 milestone Jul 8, 2026
@ngallegos ngallegos added the Bug Bug label Jul 9, 2026
@ngallegos ngallegos changed the title Loading indicator improvements to audit search and filtering Messages view does not indicate that it is waiting for a response from ServiceControl Jul 9, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Bug Bug

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants